<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
        <!-- 消息提示区 -->
        <el-alert title="添加商品信息" type="info" :closable="false"></el-alert>

        <!-- 进度条区 -->
        <el-steps :active="activeIndex - 0" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>

        <!-- tab栏切换区 -->
        <el-form :model="addGoodsForm" :rules="addGoodsFormRules" ref="addGoodsFormRef" label-width="100px" label-position="top">
            <el-tabs :tab-position="'left'" style="margin: 5px" v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClicked">
                <!-- 基本信息pane，里面有很多的item项，填写信息 -->
                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="addGoodsForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="addGoodsForm.goods_price" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="addGoodsForm.goods_weight" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="addGoodsForm.goods_number" type="number"></el-input>
                    </el-form-item>

                    <!-- 级联选择器 -->
                    <el-form-item label="商品分类" prop="goods_cat">
                        <el-cascader
                        v-model="addGoodsForm.goods_cat"
                        :options="cateList"
                        :props="cateListProps"
                        @change="handleChange"></el-cascader>
                    </el-form-item>
                </el-tab-pane>

                <!-- 商品参数pane，动态参数列表渲染 -->
                <el-tab-pane label="商品参数" name="1">
                    <el-form-item :label="item.attr_name" v-for="(item) in manyTableData" :key="item.attr_id">
                        <!-- 复选框组 -->
                        <el-checkbox-group v-model="item.attr_vals">
                            <el-checkbox :label="cb" v-for="(cb,index) in item.attr_vals" :key="index" border></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>

                <!-- 商品属性pane，静态参数列表渲染 -->
                <el-tab-pane label="商品属性" name="2">
                    <el-form-item :label="item.attr_name" v-for="(item) in onlyTableData" :key="item.attr_id">
                        <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-tab-pane>

                <!-- 商品图片pane -->
                <el-tab-pane label="商品图片" name="3">
                    <!-- action表示图片要传到的api地址 -->
                    <el-upload
                        :action="uploadURL"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        list-type="picture"
                        :headers="headerObj"
                        :on-success="handleSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-tab-pane>

                <!-- 商品内容pane -->
                <el-tab-pane label="商品内容" name="4">
                    <!-- 富文本编辑器 -->
                    <quill-editor v-model="addGoodsForm.goods_introduce"/>
                    <!-- 添加商品的按钮 -->
                    <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>

    <!-- 预览图片对话框 -->
    <el-dialog
    title="预览图片"
    :visible.sync="previewDialogVisible"
    width="50%"
    @close="handlePreviewDialgoClosed">
        <img :src="previewPath" alt="" class="previewImg">
    </el-dialog>
  </div>
</template>

<script>
// 导入lodash包
import _ from 'lodash'
    export default {
        data(){
            return {
                // 默认被激活的索引
                activeIndex:'0',

                // 添加商品的表单数据
                addGoodsForm:{
                    goods_name:'',
                    goods_price:0,
                    goods_weight:0,
                    goods_number:0,
                    goods_cat:[], // 商品所属的分类
                    pics:[],  // 图片上传成功
                    goods_introduce:'',//图片的描述富文本编辑器
                    attrs:[] // 处理动态参数和静态属性
                },

                // 添加商品的表单验证规则
                addGoodsFormRules:{
                    goods_name :[
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                    ],
                    goods_price:[
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                    ],
                    goods_weight:[
                        { required: true, message: '请输入商品重量', trigger: 'blur' },
                    ],
                    goods_number:[
                        { required: true, message: '请输入商品数量', trigger: 'blur' },
                    ],
                    goods_cat:[
                        { required: true, message: '请选择商品分类', trigger: 'blur' },
                    ]
                    
                },

                // 商品分类的类别数组
                cateList:[],

                // 级联选择器的配置项
                cateListProps:{
                    expandTrigger: 'hover',
                    label:'cat_name',
                    value:'cat_id',
                    children:'children'
                },

                // 动态参数列表数组
                manyTableData:[],

                // 静态属性列表数组
                onlyTableData:[],

                // 上传图片的地址
                uploadURL:'https://lianghj.top:8888/api/private/v1/upload',

                // 图片上传组件headers请求头对象，包含Authorization
                headerObj:{
                    Authorization:window.sessionStorage.getItem('token')
                },

                // 预览图片的绝对路径
                previewPath:'',

                // 控制预览图片的显示与隐藏
                previewDialogVisible:false

            }
        },
        created(){
            this.getCateList();
        },
        computed:{
            // 获取三级分类的id
                cateId(){
                if(this.addGoodsForm.goods_cat.length === 3){
                    return this.addGoodsForm.goods_cat[2];
                }
                return null;
            }
        },
        methods:{
            async getCateList(){
                const {data:res} = await this.$http.get('categories');
                if(res.meta.status!==200) return this.$message.error('获取商品分类数据失败');

                this.cateList = res.data;
                // console.log(this.cateList);
            },
            // 级联选择器的选中项改变时触发
            handleChange(){
                if(this.addGoodsForm.goods_cat.length!==3){
                    this.addGoodsForm.goods_cat = [];
                    return ;
                }
                console.log(this.addGoodsForm.goods_cat);
            },

            // 标签页的切换
            beforeTabLeave(activeName,oldActiveName){
                /* console.log('即将进入的标签页'+activeName);
                console.log('即将离开的标签页'+oldActiveName);
                return false; */
                if(oldActiveName === '0' && this.addGoodsForm.goods_cat.length !==3){
                    this.$message.error('请选择商品分类！');
                    return false;
                }
            },

            // 页签切换时触发该函数
            async tabClicked(){
                // 判断当前activeIndex是否为1，如果是，那说明正处于参数面板，此时发起get请求参数列表
                if(this.activeIndex === '1') {
                    const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'many'}});

                    if(res.meta.status!==200) {return this.$message.error('获取参数列表失败');}

                    // 将数据中的每一项的attr_vals变成一个数组，方便后续复选框组的渲染
                    res.data.forEach(item=>{
                        item.attr_vals = item.attr_vals.length === 0 ? []:item.attr_vals.split(',');
                    })

                    // 此时manyTableData中的每一个item项中的attr_vals都是一个数组
                    this.manyTableData = res.data;
                    console.log(res.data);
                }else if(this.activeIndex === '2'){
                    const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'many'}});

                    if(res.meta.status!==200) {return this.$message.error('获取参数列表失败');}
                    console.log(res.data);

                    // 把获取到的数据存储在data中，是静态属性数组
                    this.onlyTableData = res.data;
                }
            },

            // 监听图片上传成功，
            handleSuccess(response){
                // 先拼接得到一个图片信息对象，再把图片信息对象(临时路径tmp_path)push到pics数组中
                const picInfo = {pic:response.data.tmp_path};
                this.addGoodsForm.pics.push(picInfo);
                console.log(this.addGoodsForm)
                console.log(response)
            },

            // 处理移除图片的操作，单机叉号时触发该函数
            handleRemove(file){
                // console.log(file);
                // 1、获取移除图片的临时路径
                const filePath = file.response.data.tmp_path;
                // 2、从pics数组中找到该路径的下标
                const i = this.addGoodsForm.pics.findIndex(item => (item.pic ===filePath))
                // 3、使用数组的splice方法，移除该项
                this.addGoodsForm.pics.splice(i,1);
            },

            // 处理图片预览效果
            handlePreview(file){
                this.previewPath = file.response.data.url;
                this.previewDialogVisible = true;
            },

            // 处理对话框关闭事件，防止点开第二张图显示第一张
            handlePreviewDialgoClosed(){
                this.previewPath = '';
            },

            // 添加商品
            add(){
                this.$refs.addGoodsFormRef.validate( async valid => {
                    if(!valid) return this.$message.error('请填写必要的表单项');

                    // 进行深拷贝：因为级联选择器要求商品id是数组，但是请求的参数要求商品id是逗号拼接的字符串，因此做一层深拷贝
                    const form = _.cloneDeep(this.addGoodsForm);

                    // 处理id
                    form.goods_cat = form.goods_cat.join(','); 

                    // 处理动态参数，注意动态参数的attr_vals是数组要拼成字符串
                    this.manyTableData.forEach(item => {
                        const attrsInfo = {
                            attr_id: item.attr_id,
                            attr_value: item.attr_vals.join(' ')
                        };
                        this.addGoodsForm.attrs.push(attrsInfo);
                    })

                    // 处理静态属性，注意静态属性的attr_vals就是字符串不需要进一步处理了
                    this.onlyTableData.forEach(item => {
                        const attrsInfo = {
                            attr_id: item.attr_id,
                            attr_value: item.attr_vals
                        };
                        this.addGoodsForm.attrs.push(attrsInfo);
                    })

                    // 深拷贝之后，修改原先的attrs不会影响form，因此需要做一个次赋值操作
                    form.attrs = this.addGoodsForm.attrs;
                    console.log(form)
                    
                    // 发起请求添加商品，商品名必须是唯一的
                    const {data:res} = await this.$http.post('goods',form);
                    if(res.meta.status !== 201) return this.$message.error('添加商品失败');

                    this.$message.success('添加商品成功');
                    this.$router.push('/goods');
                })
            }

        }
    }
</script>

<style lang="less" scoped>
    .el-checkbox{
        margin:0 10px 0 0 !important;
    }

    .previewImg{
        width:100%;
    }

</style>